<template>
  <div class="app-container">
    <el-form ref="form" :inline="true" class="demo-form-inline">
      <el-form-item label="商品类型">
        <el-select v-model="form.type" filterable placeholder="请选择">
          <el-option v-for="(v,k) in typeOptions" :key="k" :label="v" :value="k" />
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="form.status" filterable placeholder="请选择">
          <el-option v-for="(v,k) in options" :key="k" :label="v" :value="k" />
        </el-select>
      </el-form-item>
      <el-form-item label="昵称">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="手机">
        <el-input v-model="form.phone" />
      </el-form-item>
      <el-form-item label="淘宝单号">
        <el-input v-model="form.content" />
      </el-form-item>
      <el-form-item label="日期">
        <el-date-picker
          v-model="form.date"
          :picker-options="pickerOptions"
          align="right"
          type="date"
          format="yyyy 年 MM 月 dd 日"
          value-format="timestamp"
          placeholder="选择日期"
        />
      </el-form-item>
      <el-form-item label="用户ID">
        <el-input v-model="form.uid" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fetchData">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="resetAndFetchData">重置并查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleDownload">下载</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="id" width="70" align="center">
        <template slot-scope="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column label="类型" width="100" align="center">
        <template slot-scope="scope">{{ scope.row.fruitType }}</template>
      </el-table-column>
      <el-table-column label="微信号" width="100" align="center">
        <template slot-scope="scope">{{ scope.row.wechat }}</template>
      </el-table-column>
      <el-table-column label="昵称" width="100" align="center">
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column label="电话" width="110" align="center">
        <template slot-scope="scope">{{ scope.row.phone }}</template>
      </el-table-column>
      <el-table-column label="地址" width="350" align="center">
        <template slot-scope="scope">{{ scope.row.adr }}</template>
      </el-table-column>
      <el-table-column label="创建时间" width="160" align="center">
        <template slot-scope="scope">{{ scope.row.createdAt }}</template>
      </el-table-column>
      <el-table-column label="已完天数" width="70" align="center">
        <template slot-scope="scope">{{ scope.row.dayFromCreate }}</template>
      </el-table-column>
      <el-table-column label="备注" width="100" align="center">
        <template slot-scope="scope">{{ scope.row.content2 }}</template>
      </el-table-column>
      <el-table-column fixed="right" label="状态" width="80" align="center">
        <template
          slot-scope="scope"
        >{{ options[scope.row.status] ? options[scope.row.status] : '其他状态' }}</template>
      </el-table-column>
      <el-table-column fixed="right" label="淘宝单号" width="180" align="center">
        <template slot-scope="scope">{{ scope.row.content }}</template>
      </el-table-column>
      <el-table-column fixed="right" label="快递单号" width="140" align="center">
        <template slot-scope="scope">{{ scope.row.packageId }}</template>
      </el-table-column>
      <el-table-column fixed="right" label="金额" width="70" align="center">
        <template slot-scope="scope">{{ scope.row.content1 }}</template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="80">
        <template slot-scope="scope">
          <el-button type="primary" @click="openForm(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <br>
    <el-pagination
      :total="total"
      :page-sizes="[5, 10, 20, 50, 100, 200, 300, 400, 600, 800, 1000, 1500, 2000, 3000, 4000, 5000]"
      :page-size="size"
      background
      layout="total,sizes, prev, pager, next,jumper"
      @size-change="handleSizeChange"
      @current-change="pageChange"
    />

    <el-dialog :visible.sync="dialogFormVisible">
      <el-form :model="formOrder">
        <el-form-item :label-width="formLabelWidth" label="id :">{{ formOrder.id }}</el-form-item>
        <el-form-item :label-width="formLabelWidth" label="uid :">{{ formOrder.uid }}</el-form-item>
        <el-form-item :label-width="formLabelWidth" label="类型 :">{{ formOrder.fruitType }}</el-form-item>
        <el-form-item :label-width="formLabelWidth" label="维系号 :">{{ formOrder.wechat }}</el-form-item>
        <el-form-item :label-width="formLabelWidth" label="昵称 :">{{ formOrder.name }}</el-form-item>
        <el-form-item :label-width="formLabelWidth" label="电话 :">{{ formOrder.phone }}</el-form-item>
        <el-form-item :label-width="formLabelWidth" label="地址 :">{{ formOrder.adr }}</el-form-item>
        <el-form-item :label-width="formLabelWidth" label="创建时间 :">{{ formOrder.createdAt }}</el-form-item>
        <el-form-item :label-width="formLabelWidth" label="已完天数 :">{{ formOrder.dayFromCreate }}</el-form-item>
        <el-form-item :label-width="formLabelWidth" label="状态 :">
          <el-radio-group v-model="formOrder.status" size="mini">
            <el-radio v-for="item in options1" :key="item.k" :label="item.k" border>{{ item.v }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="淘宝单号 :">
          <el-input v-model="formOrder.content" />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="快递单号 :">
          <el-input v-model="formOrder.packageId" />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="金额 :">
          <el-input v-model="formOrder.content1" />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="备注 :">
          <el-input v-model="formOrder.content2" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateOrder">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getOrders, updateOrder } from '@/api/level'
import { parseTime } from '@/utils/index.js'
// import  from '@/api/level'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      total: 0,
      size: 10,
      page: 1,
      form: {
        date: 0
      },
      radio: 1,
      formOrder: {
        status: 1
      },
      list: null,
      listLoading: false,
      formLabelWidth: '120px',
      options: {
        0: '所有',
        1: '空',
        88888: '红包',
        77777: '未发货',
        99999: '发货',
        2: '无法送达',
        3: '暂不处理'
      },
      options1: [
        { k: 1, v: '空' },
        { k: 88888, v: '红包' },
        { k: 77777, v: '未发货' },
        { k: 99999, v: '发货' },
        { k: 2, v: '无法送达' },
        { k: 3, v: '暂不处理' }
      ],
      typeOptions: {
        0: '所有',
        1: '15元现金红包',
        2: '移动联通20元话费卡',
        3: '原味乳酸菌饮品',
        4: '伊利袋装纯牛奶',
        5: '内蒙古纯牛肉红烧牛肉罐头',
        6: '正宗陕西红富士苹果',
        7: '正宗东北珍珠大米',
        8: '金沙河小麦高筋面粉',
        9: '农家散养土鸡蛋',
        10: '心相印纸抽整箱实惠装',
        11: '麦饭石平底不粘锅'
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          },
          {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: '前天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 2)
              picker.$emit('pick', date)
            }
          },
          {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }
        ]
      },
      value2: '',
      dialogFormVisible: false
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      this.page = 1
      this.size = 10
      this.pageChange(this.page)
    },
    resetAndFetchData() {
      this.listLoading = true
      this.form.uid = 0
      this.form.id = 0
      this.form.name = ''
      this.form.status = 0
      this.form.phone = ''
      this.form.content = ''
      this.form.date = 0
      this.form.type = 0
      this.pageChange(this.page)
    },
    handleSizeChange(val) {
      this.size = val
      this.pageChange(this.page)
    },
    pageChange(val) {
      this.page = val
      console.log(this.form.status)
      getOrders({
        uid: this.form.uid,
        id: this.form.id,
        name: this.form.name,
        status: this.form.status,
        phone: this.form.phone,
        content: this.form.content,
        type: this.form.type,
        date: Math.ceil(this.form.date / 1000),
        page: this.page,
        limit: this.size
      }).then(response => {
        console.log(response)
        this.list = response.data.orders
        for (let i = 0; i < this.list.length; i++) {
          const element = this.list[i]
          this.list[i].createdAt = parseTime(
            element.at,
            '{y}-{m}-{d} {h}:{i}:{s}'
          )
          this.list[i].fruitType = this.typeOptions[element.type]
          this.list[i].adr =
            element.province +
            element.city +
            element.area +
            '  ' +
            element.address
        }
        this.total = response.data.cnt
        this.$message({ message: '列表加载成功！', type: 'success' })
        this.listLoading = false
      })
    },
    openForm(row) {
      this.formOrder.id = row.id
      this.formOrder.uid = row.uid
      this.formOrder.cnt = row.cnt
      this.formOrder.name = row.name
      this.formOrder.content = row.content
      this.formOrder.content1 = row.content1
      this.formOrder.content2 = row.content2
      this.formOrder.packageId = row.packageId
      this.formOrder.phone = row.phone
      this.formOrder.adr = row.adr
      this.formOrder.position = row.position
      this.formOrder.status = row.status
      this.formOrder.type = row.type
      this.formOrder.fruitType = row.fruitType
      this.formOrder.createdAt = row.createdAt
      this.formOrder.dayFromCreate = row.dayFromCreate
      this.dialogFormVisible = true
    },
    updateOrder() {
      updateOrder(this.formOrder).then(response => {
        console.log(response)
        if (response.errcode > 0) {
          this.$message({ message: this.errmsg, type: 'warning' })
          return
        }
        this.pageChange(this.page)
        this.dialogFormVisible = false
      })
    },
    handleDownload() {
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = [
          'id',
          '用户ID',
          '类型',
          '状态',
          '昵称',
          '电话',
          '省',
          '市',
          '县',
          '详细地址',
          '创建时间',
          '已完天数',
          '淘宝单号',
          '快递单号',
          '金额',
          '备注'
        ]
        const filterVal = [
          'id',
          'uid',
          'type',
          'status',
          'name',
          'phone',
          'province',
          'city',
          'area',
          'address',
          'createdAt',
          'dayFromCreate',
          'content',
          'packageId',
          'content1',
          'content2'
        ]
        const list = this.list
        const data = this.formatJson(filterVal, list)
        const today = new Date()
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: '订单' + parseTime(today, '{y}-{m}-{d} {h}:{i}'),
          autoWidth: true,
          bookType: 'xlsx'
        })
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          return v[j]
        })
      )
    }
  }
}
</script>
